@import "./theme/default";

@btn-prefix-cls: ~"@{lbb-prefix}-primary-btn";
@link-prefix-cls: ~"@{lbb-prefix}-link";
@list-prefix-cls: ~"@{lbb-prefix}-list";
@banner-prefix-cls: ~"@{lbb-prefix}-banner";

.@{banner-prefix-cls} {
  height: 184px;
}

* {
  margin: 0;
  padding: 0
}

@charset "utf-8";
@white: #fff;
@orange: #ff6633;
@black: #000;
@lightgray: #efeff4;
@lightgray2: #acaab8;
@gray: #888;
@darkgray: #222;
@linegray: #ececec;
@linegray2: #d9d9d9;
@darkblue: #2f2e37;
@blue: #1b8bed;
@blue2: #1a92ee;
@font20: 20*@rem;
@font21: 21*@rem;
@font24: 24*@rem;
@font26: 26*@rem;
@font28: 28*@rem;
@font30: 30*@rem;
@font32: 32*@rem;
@rem: 0.02rem; /*使用方法：width:750*@rem;满屏是750px*/
@poppy: #ff7733; //大色块背景
@darkYellow: #f6a623; //图标背景
@darkGrey: #999999; //分割线颜色

.mine-order {
  background: #fff;
  border-bottom: 2*@rem solid #eaeaea;
  li {
    padding: 0 36*@rem;
    height: 95*@rem;
    line-height: 95*@rem;
    a {
      font-size: 28*@rem;
      display: block;
      font-weight: bold;
      margin-left: 4px;
      position: relative;
      color: #2f2e37;
      &:before {
        content: "";
        position: absolute;
        right: 0;
        top: 30*@rem;
        width: 30*@rem;
        height: 30*@rem;
        display: block;
        background: url(../images/arrow.png) no-repeat center;
        background-size: 30*@rem
      }
    }
  }
}

.mine-address {
  background: #fff;
  border-bottom: 10*@rem solid #f5f5f5;
  li {
    padding: 0 36*@rem;
    height: 95*@rem;
    line-height: 95*@rem;
    a {
      font-size: 28*@rem;
      font-weight: bold;
      display: block;
      position: relative;
      color: #2f2e37;
      &:before {
        content: "";
        position: absolute;
        right: 0;
        top: 30*@rem;
        width: 30*@rem;
        height: 30*@rem;
        display: block;
        background: url(../images/arrow.png) no-repeat center;
        background-size: 30*@rem
      }
      &:after {
        content: "";
        position: absolute;
        top: 30*@rem;
        left: 0;
        width: 36*@rem;
        height: 36*@rem;
        display: block;
        background: url(../images/address.png) no-repeat center;
        background-size: 45*@rem
      }
    }
  }
}

.mine-list {
  text-align: center;
  display: -moz-box;
  display: -webkit-box;
  border-bottom: 10*@rem solid #f5f5f5;
  padding-bottom: 0;
}

.mine-list ul {
  width: 100%;
  line-height: 55px;
  margin-left: 3px;
  a {
    color: black;
  }
}

.mine-list li {
  font-size: 23*@rem;
  font-weight: bold;
  width: 18%;
  float: left;
  margin-top: 8px;
  padding-bottom: -12px;
  margin-bottom: -12px;
}

.later-pay {
  content: "";
  position: absolute;
  display: block;
  width: 36*@rem;
  color: black;
  height: 36*@rem;
  padding-left: 17%;
  background: url(../images/later-pay.png) no-repeat center;
  background-size: 40*@rem
}

.later-deliver {
  content: "";
  position: absolute;
  display: block;
  color: black;
  width: 36*@rem;
  height: 36*@rem;
  padding-left: 17%;
  background: url(../images/later-deliver.png) no-repeat center;
  background-size: 40*@rem
}

.later-receipt {
  content: "";
  position: absolute;
  display: block;
  color: black;
  width: 36*@rem;
  height: 36*@rem;
  padding-left: 17%;
  background: url(../images/later-receipt.png) no-repeat center;
  background-size: 40*@rem
}

.red-notice {
  width: 15px;
  height: 15px;
  font-size: 10px;
  color: #fff;
  margin-top: 2px;
  line-height: 15px;
  margin-left: -50%;
  text-align: center;
  background-color: #f00;
  border-radius: 50%;
  position: absolute;
}

.send-notice {
  width: 15px;
  height: 15px;
  font-size: 10px;
  color: #fff;
  margin-top: 2px;
  line-height: 15px;
  margin-left: -41%;
  text-align: center;
  background-color: #f00;
  border-radius: 50%;
  position: absolute;
}

.get-notice {
  width: 15px;
  height: 15px;
  font-size: 10px;
  color: #fff;
  margin-top: 2px;
  line-height: 15px;
  margin-left: -31%;
  text-align: center;
  background-color: #f00;
  border-radius: 50%;
  position: absolute;
}

.address-font {
  margin-left: 25px;
}

.mall-myOrder-bar-outer {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.mall-myOrder-bar {
  background: @white;
  z-index: 9;
  line-height: 77*@rem;
  text-align: center;
  display: -moz-box;
  display: -webkit-box;
  /*display: box;*/
  border-bottom: 1px @linegray solid;
  box-sizing: border-box;
  font-size: @font28;
}

/*我的订单*/
.mall-bar {
  position: fixed;
  background: @white;
  z-index: 9;
  top: 0;
  left: 0;
  line-height: 30px;
  text-align: center;
  display: -moz-box;
  display: -webkit-box;
  /* display: box;*/
  overflow: hidden;
  width: 100%;
  border-bottom: 1px @linegray solid;
  box-sizing: border-box;
  font-size: 28*@rem;
}

.mall-bar a {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
  display: block;
  color: #3b3b3b;
  position: relative;
}

.mall-bar a.curr {
  color: #ff6750;
}

.mall-bar a.curr:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 40%;
  height: 5*@rem;
  background: #ff6750;
}

.commodity-list {
  border-top: 10*@rem solid #f5f5f5;
  li {
    line-height: 50px;
    padding-right: 10px;
    padding-left: 5px;
    border-bottom: 1px solid gainsboro;
  }
}

//商品列表1
.mall-myOrder-one {
  line-height: 30*@rem;
  padding: 20*@rem 6*@rem;
  text-align: right;
  font-size: 28*@rem;
  overflow: hidden;
}

.mall-myOrder-one span {
  display: inline-block;
  margin-left: 23*@rem;
  float: left;
}

.mall-myOrder-one p {
  float: right;
  margin-right: 20*@rem;
}

//商品列表2
.mall-myOrder-two {
  line-height: 52*@rem;
  padding: 20*@rem 6*@rem;
  text-align: right;
  font-size: @font24;
  overflow: hidden;
  color: #2f2e37;
}

.mall-myOrder-two span {
  display: inline-block;
  margin-left: 23*@rem;
  float: left;
  img {
    width: 102*@rem;
    height: 102*@rem;
  }
  p {
    font-size: 24*@rem;
    color: #3b3b3b;
  }
}

//商品列表3
.mall-myOrder-three {
  line-height: 52*@rem;
  padding: 20*@rem 6*@rem;
  text-align: right;
  font-size: 28*@rem;
  overflow: hidden;
  width: 100%
}

.mall-myOrder-three p {
  display: inline-block;
  float: right
}

.mall-myOrder-three span {
  display: inline-block;
  color: #3b3b3b;
  float: left;
  margin-right: 168*@rem;
}

.mall-myOrder-three a:nth-child(3) {
  border: 1px #ff6750 solid;
  background: #ff6750;
  color: @white;
}

.mall-myOrder-three a {
  text-align: center;
  border: 1px #ff6750 solid;
  background: @white;
  height: 50*@rem;
  line-height: 50*@rem;
  width: 150*@rem;
  border-radius: 5*@rem;
  font-size: 28*@rem;
  color: #ff6750;
  margin-left: 23*@rem;
  box-sizing: border-box;
  float: left;
}

//取消及确认收货列表
.mall-myOrder-other {
  line-height: 52*@rem;
  padding: 20*@rem 6*@rem;
  text-align: right;
  font-size: 28*@rem;
  overflow: hidden;
  width: 100%
}

.mall-myOrder-other p {
  display: inline-block;
  float: right
}

.mall-myOrder-other span {
  display: inline-block;
  color: #3b3b3b;
  float: left;
  margin-right: 363*@rem;
}

.mall-myOrder-other a:nth-child(3) {
  border: 1px #ff6750 solid;
  background: #ff6750;
  color: @white;
}

.mall-myOrder-other a {
  text-align: center;
  border: 1px #ff6750 solid;
  background: @white;
  height: 50*@rem;
  line-height: 50*@rem;
  width: 150*@rem;
  border-radius: 5*@rem;
  font-size: 28*@rem;
  color: #ff6750;
  margin-left: 23*@rem;
  box-sizing: border-box;
  float: left;
}

.total-p {
  font-size: 28*@rem;
  margin-left: 76%;
  color: #3b3b3b;
  line-height: 52*@rem;
}

//交易成功页面
.top-line {
  margin-top: 60*@rem;
  text-align: center;
  li {
    line-height: 50*@rem;
  }
}

.top-line-one {
  font-size: 32*@rem;
}

.top-line-two {
  border: 1px #ff6750 solid;
  background: #ff6750;
  height: 50*@rem;
  line-height: 50*@rem;
  width: 150*@rem;
  border-radius: 5*@rem;
  font-size: 28*@rem;
  color: @white;
  margin-left: 40%;
  margin-top: 20*@rem;
  box-sizing: border-box;
}

.down-line {
  margin-top: 52*@rem;
  line-height: 52*@rem;
  padding: 20*@rem 6*@rem;
  text-align: right;
  font-size: @font24;
  overflow: hidden;
  border-top: 1px solid gainsboro;
}

.down-line span {
  display: inline-block;
  margin-left: 23*@rem;
  float: left;
  img {
    width: 200*@rem;
    height: 200*@rem;
  }
}

.down-line p {
  padding-top: 80*@rem;
  font-size: 30*@rem;
}

.order-detail-button {
  margin-right: 40*@rem;
}

.trade-order-list {
  float: left;
  width: 360*@rem;
  height: 200*@rem;
  padding-left: 40*@rem;
  dt {
      text-align: left;
  }
}

.trade-dt-one {
  font-size: 25*@rem;
  font-weight: bold;
}

.trade-dt-two {
  font-size: 20*@rem;
  color: grey;
}

.trade-dt-three {
  height: 30*@rem;
  color: red;
}

//订单详情页面
.order-top-page {
  color: #3b3b3b;
  ul {
    border-bottom: 2*@rem #eaeaea solid;
    margin-top: 40*@rem;
    margin-bottom: 40*@rem;
  }
  li {
    margin-left: 44*@rem;
    padding-bottom: 20*@rem;
    line-height: 40*@rem;
  }
}

.page-ul-one {
  p {
    color: red;
    float: right;
    font-size: 26*@rem;
    padding-right: 44*@rem;
    margin-top: -100*@rem;
  }
}

.order-down-page {
  color: #3b3b3b;
  ul {
    margin-top: 40*@rem;
    margin-bottom: 50*@rem;
  }
  li {
    margin-left: 44*@rem;
    padding-bottom: 20*@rem;
    line-height: 50*@rem;
  }
}

.orderDetail-goods {
  margin-top: 25*@rem;
  line-height: 52*@rem;
  padding: 20*@rem 6*@rem;
  text-align: right;
  overflow: hidden;
}

.orderDetail-goods span {
  display: inline-block;
  margin-left: 20*@rem;
  float: left;
  img {
    width: 200*@rem;
    height: 200*@rem;
  }
}

.orderDetail-goods p {
  padding-top: 140*@rem;
  padding-right: 20*@rem;
}

.span-hidden {
  display: none;
  width: 30*@rem;
}

.order-list-display {
  margin-top: 30px;
}

//登录验证
.text-border-display {
  -webkit-flex: 1;
  border: none;
  font-size: 24*@rem;
  width: 250*@rem;
}

.store-verification {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  width: 700*@rem;
  padding-left: 21*@rem;
  -webkit-justify-content: space-around;
  line-height: 54*@rem;
  font-size: 24*@rem;
  color: #9e9e9e;
}
.store-verification-p{
  padding-top: 23*@rem;
  text-align: center;
  color: @black;
}
.login-one--rows {
  border-bottom: 0.5*@rem solid #c8c7cc;
  border-top: 0.5*@rem solid #c8c7cc;
}

.phone-number-verification-one {
  display: -webkit-flex;
  width: 700*@rem;
  padding-left: 38*@rem;
  line-height: 102*@rem;
  font-size: 24*@rem;
  color: #9e9e9e;
}

.delete-img {
  padding-top: 35*@rem;
  &:before {
    content: "";
    position: absolute;
    width: 30*@rem;
    height: 30*@rem;
    right: 60*@rem;
    display: block;
    background: url(../images/delete-all-text-phone.png) no-repeat center;
    background-size: 30*@rem;
  }
}
.delete-img-name{
  padding-top: 35*@rem;
  &:before {
    content: "";
    position: absolute;
    width: 30*@rem;
    height: 30*@rem;
    right: 60*@rem;
    display: block;
    background: url(../images/delete-all-text-phone.png) no-repeat center;
    background-size: 30*@rem;
  }
}
.phone-number-verification-two {
  display: -webkit-flex;
  width: 700*@rem;
  padding-left: 38*@rem;
  line-height: 102*@rem;
  font-size: 24*@rem;
  color: #9e9e9e;
}

.add-employee-choose-employeeType {
  padding-top: 30*@rem;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  width: 700*@rem;
  padding-left: 21*@rem;
  -webkit-justify-content: space-around;
  line-height: 54*@rem;
  font-size: 24*@rem;
  color: #9e9e9e;
  div:nth-child(1) {
    padding-top: 10*@rem;
    color: @black;
  }
}

.add-employeeType {
  padding-top: 10*@rem;
  width: 500*@rem;
  li {
    float: left;
    text-align: center;
    width: 160*@rem;
    height: 60*@rem;
    margin-left: 6*@rem;
    border: 1*@rem solid #9e9e9e;
  }
  .curr {
    color: white;
    background-color: @darkYellow;
    border: 1*@rem solid @darkYellow;
  }
}

.login-two-rows {
  border-bottom: 0.5*@rem solid #c8c7cc;
}
.employee-bottom-rows{
  height: 160*@rem;
  border-bottom: 0.5*@rem solid #c8c7cc;
}
.confirm-btn-div {
  margin-left: 115*@rem;
  margin-top: 56*@rem;
}

.confirm-btn {
  border: 0;
  text-align: center;
  font-size: 40*@rem;
  border-radius: 8*@rem;
  height: 66*@rem;
  width: 510*@rem;
  color: white;
}

.confirm-prompt-again {
  color: #9e9e9e;
  margin-top: 68*@rem;
  margin-left: 48*@rem;
  &:before {
    content: "";
    position: absolute;
    left: 15*@rem;
    width: 28*@rem;
    height: 30*@rem;
    display: block;
    background: url(../images/remind.png) no-repeat center;
    background-size: 28*@rem;
  }
}

.me-operation {
  background: #fff;
  border-bottom: 2*@rem solid #eaeaea;
  li {
    padding: 0 36*@rem;
    height: 95*@rem;
    line-height: 95*@rem;
    a {
      font-size: 28*@rem;
      display: block;
      font-weight: bold;
      margin-left: 4px;
      position: relative;
      color: #2f2e37;
      &:before {
        content: "";
        position: absolute;
        right: 0;
        top: 30*@rem;
        width: 30*@rem;
        height: 30*@rem;
        display: block;
        background: url(../images/arrow.png) no-repeat center;
        background-size: 30*@rem
      }
    }
  }
}

//二维码页面
.quickResponseCode {
  padding-top: 60*@rem;
  text-align: center;
  font-size: 24*@rem;
  color: #eb8b11;
}



.quickResponseCode-shopName {
  padding-top: 34*@rem;
}

.quickResponseCode-shopName-one-p {
  font-weight: 100;
  font-size: 35*@rem;
  color: black;
}

.quickResponseCode-shopName-two-p {
  padding-top: 15*@rem;
}
.quickResponseCode-shopName-three-p{
  padding-top: 40*@rem;
  color: #838383;
  font-size: 25*@rem;
}
.quickResponseCode-p {
  padding-top: 34*@rem;
}

.quickResponseCode-up {
  width: 100%;
  height: 600*@rem;
  background-color: #f5f5f5;
}

.p-prompt-title {
  font-size: 24*@rem;
  color: #000000;
  &:before {
    content: "";
    position: absolute;
    left: 27*@rem;
    width: 30*@rem;
    height: 35*@rem;
    display: block;
    background: url(../images/invitation-p.png) no-repeat center;
    background-size: 30*@rem;
  }
}

.p-prompt-two {
  margin-left: 60*@rem;
  margin-top: 48*@rem;
  font-size: 22*@rem;
  color: #666666;
  p {
    line-height: 44*@rem;
  }
}

.p-prompt-three {
  p{
    font-size: 26*@rem;
    padding-top: 30*@rem;
  }
}
.quickResponseCode-btn{
  margin-top: 100*@rem;
  text-align: center;
  font-size: 24*@rem;
}
.quickResponseCode-btn-one{
  width: 312*@rem;
  height: 54*@rem;
  background-color: white;
  color: #f6a623;
  box-shadow: 0;
  border: solid 1*@rem #f6a623;
}
.quickResponseCode-btn-two{
  margin-left: 12*@rem;
  width: 312*@rem;
  height: 54*@rem;
  background-color: white;
  color: #f6a623;
  border: solid 1*@rem #f6a623;
  box-shadow: 0;
}
.restaurant-name {
  width: 100%;
  height: 200*@rem;
  font-size: 28*@rem;
  color: #000000;
  p {
    text-align: center;
    padding-top: 78*@rem;
  }
}
.login-verification-div{
  padding-left: 130*@rem;
}
.login-verification {
  border: 1*@rem solid #ff6750;
  height: 52*@rem;
  width: 172*@rem;
  border-radius: 26*@rem;
  background: #ff6750;
  color: white;
  text-align: center;
  font-size: 24*@rem;
  line-height: 52*@rem;
  margin-top: 27*@rem;
}

.login-verification-again {
  border: 1*@rem solid #888888;
  height: 52*@rem;
  text-align: center;
  width: 172*@rem;
  border-radius: 26*@rem;
  background: #888888;
  color: white;
  font-size: 24*@rem;
  line-height: 52*@rem;
  margin-top: 27*@rem;
}

.joinStoreSuccess-all-position {
  padding-top: 300*@rem;
}

.joinStoreSuccess-image-div {
  position: absolute;
  width: 329*@rem;
  height: 329*@rem;
  top: 50*@rem;
  left: 206*@rem;
  display: block;
  background: url(../images/join-success-smile.png) no-repeat center;
  background-size: 329*@rem;
}

.joinStoreSuccess-p {
  text-align: center;
  padding-top: 60*@rem;
  font-size: 30*@rem;
  color: #4e8bed;
}

.joinStoreSuccess-ul {
  padding-left: 60*@rem;
  margin-top: 126*@rem;
  margin-bottom: 54*@rem;
}

.p-first {
  color: #eb8b11;
  font-size: 24*@rem;
}
.p-two-success{
  padding-top: 18*@rem;
  font-size: 24*@rem;
}
.p-inside-div {
  padding-top: 18*@rem;
  font-size: 20*@rem;
  color: @darkGrey;
  p{
    padding-top: 18*@rem;
  }
}

.joinStoreSuccess-div-end {
  text-align: center;
}
.joinStoreSuccess-div-end-two{
  text-align: center;
  font-size: 30*@rem;
}
.mui-switch {
  width: 38px;
  height: 22px;
  position: relative;
  border: 1px solid #dfdfdf;
  background-color: #999999;
  box-shadow: #999999 0 0 0 0 inset;
  border-radius: 15px;
  background-clip: content-box;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
  outline: none;
}

.mui-switch:before {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mui-switch:checked {
  border-color: #ff6750;
  box-shadow: #ff6750 0 0 0 25px inset;
  background-color: #ff6750;
}

.mui-switch:checked:before {
  left: 18px;
}

.mui-switch.mui-switch-checkbox {
  transition: background-color ease 0.4s;
}

.mui-switch.mui-switch-checkbox:before {
  transition: left 0.3s;
}

.mui-switch.mui-switch-checkbox:checked {
  box-shadow: #dfdfdf 0 0 0 0 inset;
  background-color: #ff6750;
  transition: border-color 0.4s, background-color ease 0.4s;
}

.mui-switch.mui-switch-checkbox:checked:before {
  transition: left 0.3s;
}

.me-operation-last {
  background: #fff;
  border-bottom: 2*@rem solid #eaeaea;
  li {
    padding: 0 36*@rem;
    height: 95*@rem;
    line-height: 95*@rem;
    a {
      font-size: 28*@rem;
      display: block;
      font-weight: bold;
      margin-left: 4px;
      position: relative;
      color: #2f2e37;
    }
  }
}

.me-checkBox-div {
  margin-left: 90%;
  margin-top: -40px;
}

.me-operation-last-up {
  background: #fff;
  border-bottom: 2*@rem solid #eaeaea;
  li {
    padding: 0 36*@rem;
    height: 95*@rem;
    line-height: 95*@rem;
    a {
      font-size: 28*@rem;
      display: block;
      font-weight: bold;
      margin-left: 4px;
      position: relative;
      color: #2f2e37;
      &:before {
        content: "";
        position: absolute;
        right: 0;
        top: 20*@rem;
        width: 60*@rem;
        height: 60*@rem;
        display: block;
        background: url(../images/qr-code.png) no-repeat center;
        background-size: 60*@rem
      }
    }
  }
}

.me-span {
  margin-left: 120*@rem;
  font-size: 8px;
  color: #999999;
}

.me-order {
  background: #fff;
  border-bottom: 2*@rem solid #eaeaea;
  li {
    padding: 0 36*@rem;
    height: 95*@rem;
    line-height: 95*@rem;
    a {
      font-size: 28*@rem;
      display: block;
      font-weight: bold;
      margin-left: 4px;
      position: relative;
      color: #2f2e37;
      &:before {
        content: "";
        position: absolute;
        right: 0;
        top: 30*@rem;
        width: 30*@rem;
        height: 30*@rem;
        display: block;
        background: url(../images/me-row-right.png) no-repeat center;
        background-size: 30*@rem
      }
    }
  }
}

.test {
  width: 100%;
  height: 1000px;
  background: red;
}

.test1 {
  background-color: white;
}

.login-text {
  background-color: white;
}

.add-employee-btn {
  border: 0;
  text-align: center;
  font-size: 40*@rem;
  border-radius: 8*@rem;
  height: 66*@rem;
  width: 510*@rem;
  color: white;
  background-color: #f6a623;
}

.add-employee-btn-div {
  height: 196*@rem;
  padding-left: 100*@rem;
  padding-top: 56*@rem;
  border-bottom: 0.5*@rem solid #c8c7cc;
  background-color: white;
}

.store-bar {
  position: fixed;
  background: @white;
  line-height: 30px;
  text-align: center;
  display: -webkit-box;
  overflow: hidden;
  border-bottom: 1px @white solid;
  box-sizing: border-box;
  font-size: 28*@rem;
}

.store-bar a {
  -webkit-box-flex: 1;
  display: block;
  color: #3b3b3b;
  position: relative;
  font-size: 24*@rem;
}

.store-bar a.curr {
  color: #ff6750;
}

.store-bar a.curr:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 40%;
  height: 5*@rem;
  background: #ff6750;
}

.store-name {
  text-align: center;
  margin-bottom: 70*@rem;
  ul {
    width: 550*@rem;
    font-size: 24*@rem;
  }
  li {
    float: left;
    width: 258*@rem;
    margin-top: 20*@rem;
    margin-left: 15*@rem;
    border: 1*@rem solid #c8c7cc;
  }
  .cur {
    background: #ff7733;
    color: @white;
  }
}
